<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10.17</title>

    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .box > ul{
            width: 700px;
            height: 50px;
            display: flex;
            margin: 0 auto;
            
        }
        .box > ul > li:hover{
            color: orange;
            cursor: pointer;
        }
        li{
            width: 100px;
            height:100%;
            text-align: center;
            line-height: 50px; 
        }
        .box20{
            display: none;

        }
        .box21{
            display: none;

        }
        .box22{
            display: none;

        }
        .box23{
            display: none;

        }
        .box24{
            display: none;

        }
        .box25{
            display: none;

        }
        .box26{
            display: none;

        }
        .box27{
            display: none;

        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="li">Xiaomi手机</li>
            <li class="li">Redmi手机</li>
            <li class="li">电视</li>
            <li class="li">笔记本</li>
            <li class="li">平板</li>
            <li class="li">家电</li>
            <li class="li">路由器</li>
        </ul>
    </div>
    <div class="box2">
        <img src="./XiaoMi手机.png" class="box20">
        <img src="./Redmi手机.png" class="box21">
        <img src="./电视.png" class="box22">
        <img src="./笔记本.png" class="box23">
        <img src="./平板.png" class="box24">
        <img src="./家电.png" class="box25">
        <img src="./路由器.png" class="box26">
        
    
    </div>

    <script>
        let divs = document.querySelector(".box");
        let uls = document.querySelectorAll("ul");
        let lis = document.querySelectorAll("li");
        let img1 = document.querySelector(".box20");
        let img2 = document.querySelector(".box21");
        let img3 = document.querySelector(".box22");
        let img4 = document.querySelector(".box23");
        let img5 = document.querySelector(".box24");
        let img6 = document.querySelector(".box25");
        let img7 = document.querySelector(".box26");
        let img8 = document.querySelector(".box27");
        let box2 = document.querySelector("div.box2");
        // console.log(box2);
        // console.log(img);
        lis[0].addEventListener("mouseover",function(){
            img1.style.display = 'block';
            // console.log(123);
        });
        lis[0].addEventListener("mouseout",function(){
            img1.style.display = 'none';
        });

        lis[1].addEventListener("mouseover",function(){
            img2.style.display = 'block';
        });
        lis[1].addEventListener("mouseout",function(){
            img2.style.display = 'none';
        });

        lis[2].addEventListener("mouseover",function(){
            img3.style.display = 'block';
        });
        lis[2].addEventListener("mouseout",function(){
            img3.style.display = 'none';
        });

        lis[3].addEventListener("mouseover",function(){
            img4.style.display = 'block';
        });
        lis[3].addEventListener("mouseout",function(){
            img4.style.display = 'none';
        });

        lis[4].addEventListener("mouseover",function(){
            img5.style.display = 'block';
        });
        lis[4].addEventListener("mouseout",function(){
            img5.style.display = 'none';
        });

        lis[5].addEventListener("mouseover",function(){
            img6.style.display = 'block';
        });
        lis[5].addEventListener("mouseout",function(){
            img6.style.display = 'none';
        });

        lis[6].addEventListener("mouseover",function(){
            img7.style.display = 'block';
        });
        lis[6].addEventListener("mouseout",function(){
            img7.style.display = 'none';
        });

        lis[7].addEventListener("mouseover",function(){
            img8.style.display = 'block';
        });
        lis[7].addEventListener("mouseout",function(){
            img8.style.display = 'none';
        });

    </script>
</body>
</html>